<template>
  <div class="container">
    <router-view class="fixed_height"></router-view>
    <!-- <div class="footer"></div> -->
    <div class="nav_list flex_row">
      <div
        v-for="(item, index) in navList"
        :key="index"
        @click="selectNav(item, index)"
        :class="[
          'item',
          'flex_column',
          'flex_align_center',
          { currentNav: item.status },
        ]"
      >
        <div class="icon">
          <img :src="item.icon()" class="icon_img" alt="" />
        </div>
        <div class="text">{{ item.text }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";

export default {
  data() {
    return {
      // 导航列表
      navList: [
        {
          text: "首页",
          status: true,
          icon() {
            return this.status
              ? require("@/assets/images/home/实1.png")
              : require("@/assets/images/home/线1.png");
          },
          routerPath: "/nav/home",
        },
        {
          text: "测评中心",
          status: false,
          icon() {
            return this.status
              ? require("@/assets/images/home/实2.png")
              : require("@/assets/images/home/线2.png");
          },
          routerPath: "/nav/evaluate",
        },
        {
          text: "咨询预约",
          status: false,
          icon() {
            return this.status
              ? require("@/assets/images/home/实3.png")
              : require("@/assets/images/home/线3.png");
          },
          routerPath: "/nav/consult",
        },
        {
          text: "功能中心",
          status: false,
          icon() {
            return this.status
              ? require("@/assets/images/home/实4.png")
              : require("@/assets/images/home/线4.png");
          },
          routerPath: "/nav/functionCenter",
        },
        {
          text: "我的",
          status: false,
          icon() {
            return this.status
              ? require("@/assets/images/home/实5.png")
              : require("@/assets/images/home/线5.png");
          },
          routerPath: "/nav/my",
        },
      ],
    };
  },
  computed: {
    ...mapState(["CURRENT_NAV"]),
  },
  methods: {
    ...mapMutations(["SET_NAV_POSITION"]),
    // 选择导航
    selectNav(item, index) {
      this.SET_NAV_POSITION(index);
      if (this.$route.path == item.routerPath) return;
      this.setNavCurrent(index);
      this.$router.push(item.routerPath);
    },
    // 设置高亮的导航
    setNavCurrent(index) {
      for (let i = 0; i < this.navList.length; ++i) {
        this.navList[i].status = false;
      }
      this.navList[index].status = true;
    },
  },
  watch: {
    $route: {
      deep: true,
      immediate: true,
      handler: function (nv) {
        let index = this.navList.findIndex(
          (item) => item.routerPath == nv.path
        );
        this.setNavCurrent(index);
      },
    },
  },
  created() {},
};
</script>

<style lang="less" scoped>
.container {
  background-color: #f4f6fa;
  > .fixed_height {
    height: calc(100% - 62.5px);
    overflow: auto;
  }
  .nav_list {
    position: fixed;
    bottom: 0;
    left: 0;
    justify-content: space-around;
    height: 62.5px;
    width: 100%;
    background-color: #fff;
    align-items: center;
    .item {
      justify-content: center;
      width: 75px;
      height: 62.5px;
      &.currentNav {
        .text {
          font-size: 11.81px;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: bold;
          text-align: left;
          color: #009de6;
        }
      }
      .icon {
        width: 20px;
        height: 20px;
        img.icon_img {
          display: block;
          width: 100%;
          height: 100%;
        }
        margin-bottom: 10px;
      }

      .text {
        font-size: 11.81px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: bold;
        text-align: left;
        color: #555555;
        // margin-top: 10px;
      }
    }
  }
}
</style>
